<template>
	<view>
		<!-- 推荐商品 -->
		<commend-goods :commendGoods="commendGoods"></commend-goods>
		<view v-show="over" class="over">----- 我是有底线的 -----</view>
	</view>
</template>

<script>
	import commendGoods from '../../components/commendGoods.vue'
	export default {
		name:'goodsList',
		components:{commendGoods},
		data(){
			return{
				// 获取推荐商品数据页码
				number:1,
				// 保存推荐商品数据
				commendGoods:[],
				// 是否已经没有数据
				over:false
			}
		},
		onLoad(){
			this.getCommendGoods()
		},
		methods:{
			// 获取推荐商品数据
			async getCommendGoods(){
				const res = await this.$myRequest({
					url:`/api/getgoods`,
					method:'get',
					data:{
						pageindex:this.number
					}
				})
				console.log(res)
				// 当页面滚动到底部时，需要添加，而不是替代
				this.commendGoods = [...this.commendGoods,...res.data.message]
			}
		},
		// 页面滚动到底部事件
		onReachBottom(){
			// 因为就两页数据，且服务器美欧返回总数据，就先这样判断了
			if(this.number === 2) return;
			this.number = 2;
			this.getCommendGoods()
			this.over = true
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.number = 1
			this.commendGoods = []
			this.getCommendGoods()
			this.over = false
		}
	}
</script>

<style scoped>
	.over{
		font-size: 14px;
		color: #999;
		text-align: center;
		padding: 5px;
	}
</style>
